<template>
    <el-card class="box-card">
        <div>
            <div>
                <el-row :gutter="10">
                    <br>
                    <el-col :span="6">
                        审核状态：
                        <el-radio-group v-model="queryStatusType" @change="checkoutStatus">
                            <el-radio :label="-1">全部</el-radio><br>
                            <el-radio :label="1">已通过</el-radio><br>
                            <el-radio :label="0">未通过</el-radio><br>
                            <el-radio :label="2">未审核</el-radio><br>
                        </el-radio-group>
                    </el-col>
                    
                    <el-col :span="1"><el-button type="primary" @click="exportExcel('reviewOrderList')">导出到excel</el-button></el-col>
                    
                </el-row>
                <br>
            </div>

            <el-table ref="reviewOrderListData" :data="reviewOrderListData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
                <el-table-column prop="order_number" label="订单编号" width=""></el-table-column>
                <el-table-column prop="order_quantity" label="订单数量" width=""></el-table-column>
                <el-table-column prop="name" label="大客户专员姓名" width=""></el-table-column>
                <el-table-column prop="company" label="单位名称" width=""></el-table-column>
                <el-table-column prop="create_time" label="创建时间" width=""></el-table-column>
                <el-table-column prop="" label="单价" width=""></el-table-column>
                <el-table-column prop="order_status" label="order_status" width=""></el-table-column>
                <el-table-column fixed="right" prop="" label="操作" width="">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="checkOrder(scope.row.order_number,1)">通过</el-button>
                        <el-button type="primary" @click="checkOrder(scope.row.order_number,0)">未通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[4,8]"
                :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total='reviewOrderListData.length'>
            </el-pagination>

        </div>
    </el-card>
</template>


<script>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

    export default {
        name:'reviewOrderList',
        data(){
            return {
                reviewOrderListData:[{
                    order_number:'5304226943336137571',
                    order_quantity:2,
                    name:'小娜姐',
                    company:'利通机械',
                    create_time:'2021-03-11T10:24:15.670Z',
                }],
                queryStatusType:-1,
                currentPage: 1, // 默认开始页面
                pagesize: 4,
                total: 0,
            };
        },
        created() {
            this.getReviewOrderListData();
        },
        methods: {
            handleSizeChange (size) {
                console.log(`每页 ${size} 条`)
                this.pagesize = size
            },
            handleCurrentChange (currentPage) {
                this.currentPage = currentPage
                console.log(`当前页: ${currentPage}`)
            },
            //checkOrder
            async checkOrder(orderNumber,key){
                const {data:res} = await this.$axios.post('checkOrders',{
                        order_number:orderNumber,
                        keyword:key
                });
                console.log(key);
                console.log(res);
                // this.$message.success();
            },
            //
            async checkoutStatus(){
                // console.log("状态是:"+this.queryStatusType);
                console.log("转换状态是:"+(this.queryStatusType==-1?null:this.queryStatusType));
                const {data:res} = await this.$axios.post('getOrderStatus',{
                     status:this.queryStatusType==-1?null:this.queryStatusType
                });
                this.reviewOrderListData = res.res;
            },
            async getReviewOrderListData(){
                // this.queryStatusType=(this.queryStatusType==-1?null:this.queryStatusType);
                const {data:res} = await this.$axios.post('getOrderStatus',{
                     status:this.queryStatusType==-1?null:this.queryStatusType
                });
                this.reviewOrderListData = res.res;
                
            },
            //导出Excel
            exportExcel(excelName) {
                //excelName --设置导出的excel名称
                //report-table --对应的要导出的el-table的ref名称
                try {
                    const $e = this.$refs['reviewOrderListData'].$el;
                    // 如果表格加了fixed属性，则导出的文件会生产两份一样的数据，所以可在这里判断一下
                    let $table = $e.querySelector('.el-table__fixed');
                    if (!$table) {
                    $table = $e;
                    }
                    // 为了返回单元格原始字符串，设置{ raw: true }
                    const wb = XLSX.utils.table_to_book($table, { raw: true });
                    const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
                    FileSaver.saveAs(
                        new Blob([wbout], { type: 'application/octet-stream' }),
                        `${excelName}.xlsx`,
                    );
                } catch (e) {
                    if (typeof console !== 'undefined') console.error(e);
                }
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>